<template>
    <div id="login">
        <div class="iconfont icon-guanbi1" @click="$router.push('/App_index/index_mine')"></div>
        <h2>密码登录</h2>
        <div class="line">
            <input type="text" placeholder="手机/用户名" v-model="userdata.phone">
        </div>
        <div class="line">
            <input type="password" placeholder="密码" v-model="userdata.pass">
        </div>
        <div class="btn line">
            <button @click="login">登录</button>
        </div>
        <div class="lastline">
            <span>手机号登录</span>
            <span @click="$router.push('/register')">去注册</span>
        </div>
    </div>
</template>

<script lang="ts">

// import {mapMutations,mapActions,mapState} from 'vuex'
import {getLoginData} from '@/api/login'
export default {
    data(){
        return{
            userdata:{
                phone:'',
                pass:''
            }
        }
    },
    methods:{
        login(){
            if(/^1[3-9]\d{9}$/.test(this.userdata.phone)&&this.userdata.pass){
                getLoginData(this.userdata).then((res)=>{
                    if(res.data.code==200){
                        console.log(res.data);
                        // alert('登录成功')
                        // this.$toast.success('登录成功')
                     
                        //保存token到本地
                        localStorage.setItem('token',res.data.token)
                        //保存用户信息到本地
                        localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo))
                        // this.set_user_info(res.data.userinfo)
                        // this.set_token(res.data.token)
                        // this.get_favlist()

                        // this.quest_shopcartlist()
                        this.$router.push('/index')
                        
                    }else{
                        this.$toast('登录失败')
                    }
                })
            }else{
                // alert('您输入的信息有误')
                 this.$toast('您输入的信息有误')
            }
        },
        // ...mapActions('fav',['get_favlist']),
        // ...mapActions('sc',['quest_shopcartlist']),
        // ...mapMutations(['set_user_info',
        // 'set_token'])
    },
    computed:{
        // ...mapState(['token','user_info'])
    }
}
</script>

<style lang='scss' scoped>
    #login{
        padding: .1rem .3rem;
        h2{
            font-size: .3rem;
            margin: .5rem 0 .2rem;
            font-weight: 700;
        }
        .line {
            input {
                font-size: 0.18rem;
                width: 100%;
                height: .6rem;
                border: .02rem solid rgb(223, 223, 223);
                padding-top: 10px;
                border-radius: 20px;
            }
        }
    
        button{
            width: 100%;
            height: .4rem;
            margin-top: .5rem;
            border-radius: .2rem;
            background-color: rgb(223, 223, 223);
            border: none;
            outline: none;
            color: rgb(171, 171, 171);
        }
        .lastline{
            color: rgb(63, 188, 243);
            display: flex;
            justify-content: space-between;
            margin-top: .1rem;
            font-size: .13rem;
        }
    }
</style>